<template>
  <div class="song-comment">
    <div class="myself">
      <el-input
        type="textarea"
        placeholder="请留下你的评论"
        v-model="textComment"
        maxlength="140"
        show-word-limit
        resize="none"
      ></el-input>
      <el-button
        size="mini"
        round
        type="info"
        style="float: right; margin-top: 10px"
        @click="SentComment"
      >
        评论
        <el-icon><edit></edit></el-icon>
      </el-button>
    </div>
    <p style="margintop: 30px; fontsize: 14px">最新评论({{ total }})</p>
    <div class="newComment" v-for="(item, index) in comments" :key="index">
      <div class="userComment">
        <div class="userImg">
          <img :src="item.user.avatarUrl" alt="404" />
          <div class="talk">
            <a href="#" style="color: #0a63ab; margin: 0 8px"
              >{{ item.user.nickname }}:</a
            >
            <span style="lineheight: 1.5">{{ item.content }}</span>
            <p style="margin: 0 8px">{{ $filters.formatTime(item.time) }}</p>
          </div>
        </div>
        <div class="doing">
          <span class="to">举报!</span>
          <span
            ><el-icon><pointer /></el-icon
            >{{ item.likedCount > 0 ? `(${item.likedCount})` : '' }}</span
          >| <span>分享</span>|
          <span>回复</span>
        </div>
      </div>
    </div>
    <el-pagination
      layout="prev, pager, next"
      :page-size="limit"
      background
      :total="total"
      @current-change="handleCurrentChange"
      style="text-align: center; margin: 0 auto; margin-bottom: 10px"
    ></el-pagination>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { getSongComment, sentComment } from '@/service/song-sheet'
import { getMvComment } from '@/service/mvvideo'
import { getMusicComment } from '@/service/now-music'
import { Message } from '@/utils/message'

export default defineComponent({
  props: {
    songId: {
      type: Number,
      required: true
    },
    commentType: {
      type: String,
      default: 'song'
    }
  },
  emits: ['handleTop'],
  setup(props, { emit }) {
    const comments: any = ref([])
    const textComment = ref('')
    const total = ref(0)
    let limit = ref(30)
    let offset = 0
    // 歌曲获取评论
    function getSingelComment(id: number, offset: number, limit: number) {
      getMusicComment(id, offset, limit).then((res: any) => {
        if (offset == 0) {
          comments.value = [...res.hotComments, ...res.comments]
        } else {
          comments.value = [...res.comments]
        }
        total.value = res.total
      })
    }
    // 歌单获取评论
    function getComment(id: number, offset: number, limit: number) {
      getSongComment(id, offset, limit).then((res: any) => {
        if (offset == 0) {
          comments.value = [...res.hotComments, ...res.comments]
        } else {
          comments.value = [...res.comments]
        }
        total.value = res.total
      })
    }
    // 视频获取评论
    function getVideoComment(id: number, offset: number, limit: number) {
      getMvComment(id, offset, limit).then((res: any) => {
        if (offset == 0) {
          comments.value = [...res.hotComments, ...res.comments]
        } else {
          comments.value = [...res.comments]
        }
        total.value = res.total
      })
    }

    const handleCurrentChange = (newPage: number) => {
      offset = (newPage - 1) * limit.value
      if (props.commentType == 'mv') {
        getVideoComment(props.songId, offset, limit.value)
      } else if (props.commentType == 'music') {
        getSingelComment(props.songId, offset, limit.value)
      } else {
        getComment(props.songId, offset, limit.value)
      }
      emit('handleTop')
    }
    // 发送评论接口  t:发送1 回复2 type:歌曲0 MV1 歌单2 专辑3 电台4 视频5 动态6
    function potComments(id: number, content: string, t = 1, type = 2) {
      sentComment(id, content, t, type).then((res: any) => {
        if (res && res.code == 200) {
          Message('评论发送成功！', 'success')
          textComment.value = ''
          if (props.commentType == 'mv') {
            getVideoComment(props.songId, offset, limit.value)
          } else if (props.commentType == 'music') {
            getSingelComment(props.songId, offset, limit.value)
          } else {
            getComment(props.songId, offset, limit.value)
          }
        } else if (res && res.code == 250) {
          Message(res.msg, 'warning')
        } else {
          Message('好像没有登录诶？', 'warning')
        }
      })
    }
    const SentComment = () => {
      Message('评论不能为空', 'warning', () => {
        if (!textComment.value) {
          return true
        }
        return false
      })
      if (textComment.value) {
        if (props.commentType == 'mv') {
          potComments(props.songId, textComment.value, 1, 1)
          return
        }
        if (props.commentType == 'music') {
          potComments(props.songId, textComment.value, 1, 0)
          return
        }
        potComments(props.songId, textComment.value)
      }
    }
    return {
      comments,
      total,
      limit,
      textComment,
      handleCurrentChange,
      SentComment,
      getComment,
      getVideoComment,
      getSingelComment
    }
  }
})
</script>

<style scoped lang="less">
.song-comment {
  padding-bottom: 20px;
  .doing {
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 12px;
    color: #999;
  }
  .doing span {
    margin: 0 8px;
    cursor: pointer;
  }
  .newComment:hover span.to {
    display: inline-block;
  }
  .to {
    display: none;
    cursor: pointer;
  }
  .talk span,
  .talk a {
    position: relative;
    top: -8px;
  }
  .myself {
    margin: 20px 0 40px 0;
  }
  .newComment {
    margin-top: 10px;
    font-size: 13px;
    position: relative;
  }
  .userComment {
    margin-top: 5px;
    border-top: 1px solid #f0f0f2;
    padding: 15px 0;
    display: flex;
    justify-content: space-between;
  }
  .userImg {
    display: flex;
    align-items: center;
  }
  .userImg img {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    margin-right: 5px;
  }
}
</style>
